<template>
  <div>
    <!-- 顶部 -->
    <!-- @submit="handleLogin" -->
    <van-nav-bar title="登录 / 注册" left-arrow @click-left="$router.back()" />
    <van-form
      :show-error="false"
      :show-error-message="false"
      validate-first
      ref="loginForm"
      @submit="handleLogin"
    >
      <van-field
        v-model="user.mobile"
        label="手机号码"
        left-icon="smile-o"
        right-icon="warning-o"
        placeholder="请输入手机号码"
        name="mobile"
        :rules="userFormRules.mobile"
      />
      <van-field
        v-model="user.code"
        clearable
        label="密码"
        left-icon="music-o"
        placeholder="请输入密码"
        name="code"
        :rules="userFormRules.code"
      >
        <!-- 发送按钮 -->
        <template #button>
          <van-count-down
            :time="1000 * 5"
            format="ss s"
            v-if="isCountDownShow"
            @finish="isCountDownShow = false"
          />
          <van-button
            size="small"
            type="primary"
            round
            :loading="idSendmsLoading"
            @click="handleSendms"
            v-else
            >发送验证码</van-button
          >
        </template></van-field
      >
      <van-button type="info" block>登 录</van-button>
    </van-form>
  </div>
</template>

<script>
import { Login, sendSms } from "@/request/login";
import { Toast } from "vant";
import { mapState } from "vuex";

export default {
  data() {
    return {
      user: {
        mobile: "17090086870", // 手机号
        code: "246810" // 验证码
      },
      userFormRules: {
        mobile: [
          { required: true, message: "请输入正确手机号码" },
          { pattern: /^1[1|3|5|7]\d{9}$/, message: "手机号码格式错误" }
        ],
        code: [
          { required: true, message: "请输入验证码" },
          { pattern: /^\d{6}$/, message: "验证码格式错误" }
        ]
      },
      isCountDownShow: false,
      idSendmsLoading: false
    };
  },
  methods: {
    // 发送验证码
    async handleSendms() {
      try {
        await this.$refs["loginForm"].validate("mobile");
        this.idSendmsLoading = true;
        await sendSms(this.user.mobile); // 发送验证码
        this.isCountDownShow = true;
        this.idSendmsLoading = false;
      } catch (error) {
        this.idSendmsLoading = false;
        let message = "";
        // console.log(error);
        if (error && error.response && error.response.status === 429) {
          message = "发送太频繁了，请稍后重试";
        } else if (error.name === "mobile") {
          message = error.message;
        } else {
          message = "发送失败，请稍后重试";
        }
        this.$toast({
          message,
          position: top
        });
      }
    },
    // 登录
    async handleLogin(error) {
      const Toast = this.$toast.loading({
        message: "登录中...",
        forbidClick: true,
        duration: 0
      });
      const res = await Login(this.user);
      // console.log(res);
      // 保存 token
      if (res.status === 201) {
        this.$store.commit("setUser", res.data.data);
      }
      Toast.clear();
      this.$router.push("/my");
    }
  }
};
</script>

<style >
</style>